import React, {Component} from 'react';
import { View, Text, Image, Platform, StyleSheet } from 'react-native';
import { VerifyCode, Button,Label } from 'iftide';

export default class Basic extends Component{
    constructor(props) {
        super(props);
        this.state = {
            value: 0,
            isClearInterval:false
        }
    }

    start=()=>{
        console.log('按钮事件')

    }

    imgClick=()=>{
        console.log('图片验证码点击事件')
    }

    startedFun=()=>{
        console.log("获取按钮点击事件");
        let isClearInterval=this.state.isClearInterval;
        let that=this;
        setTimeout(function(){
            that.setState({
                isClearInterval:true
            });
        },3000)
    }

    finished=()=>{
        console.log('end')
    }

    getValue=()=>{
        let value = this.input1.getValue();
        this.setState({
            value: value,
        });
        alert(value)
    }

    clearInputVal=()=>{
        this.input1.clearInputVal();
    }

    onBlur=(val)=>{
        console.log('失去焦点时的回调函数：'+val)
    }

    _textChanged=(defaultValue)=>{
        console.log('defaultValue:'+defaultValue)
    }

    render(){
        let validate1={
            time: 5,
            tip: '短信验证码',
            onPress: this.start,
            type: 'msg',
            finishedFun: this.finished,
            isMerge: true,
            maxLength:4,
            onBlur:this.onBlur,
            startedFun:this.startedFun,
            fontStyle:{fontSize:12},
            isClearInterval:this.state.isClearInterval,
            activeColor:'blue',
            textChangeEvent:this._textChanged
        };

        let validate2={
            time: 60,
            tip: '图形验证码',
            placeHolder: '点击图片刷新点击图片点击图片刷新点击图片',
            isMerge: true,
            onPress: this.start,
            type: 'img',
            rightComponent: <Image source={require('./image.png')} style={{width: 100, height: 30}}/>,
            imgClick: this.imgClick,
            hasTopBorder: false,
            maxLength:3,
            keyboardType:"default"
        };
        let textStyle={fontSize:10,color:'red'}

        return(
            <View style={{flex:1}}>
                <View style = {styles.divider}/>
                <VerifyCode ref = {(obj) => {this.input = obj}} {...validate1}/>
                <VerifyCode ref = {(obj) => {this.input = obj}} {...validate2}/>
                <View style ={ styles.divider}/>
                <VerifyCode
                    ref={(obj) => {this.input = obj}}
                    desc = {'other'}
                    tipsString={"已发送至预留手机号，请注意查收，如未收到请核实预留手机号，再进行后续操作~~~"}
                />
                <VerifyCode ref={(obj) =>{this.input1 = obj}}
                    desc = {'code'}
                    bgColor = {"#FFFFFF"}
                    button = {true}
                    onPress={() => this.getValue()}
                    confirmText="confirm"
                    startedFun={this.startedFun}
                    disabled={true}
                    time={15}
                    btnWidth={60}
                    btnAgainWidth={100}
                    textStyle={textStyle}
                    btnWrapperStyle={{backgroundColor:'#f5f7f9'}}
                >
                    <Label text={"请输入15812345678接收到的验证码(编号776832)"} color={'description'}/>
                </VerifyCode>
                <Text style={{marginTop:30}} onPress={()=>{this.clearInputVal()}}>清除验证码</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    divider: {
        height: 20,
        backgroundColor: '#F5F7F9',
    },
});